<script setup lang="ts">
import { use } from "echarts/core";
import { CanvasRenderer } from "echarts/renderers";
import { BarChart } from "echarts/charts";
import {
  LegendComponent,
  TitleComponent,
  TooltipComponent,
} from "echarts/components";
import VChart, { THEME_KEY } from "vue-echarts";
import { computed, provide, ref, watchEffect } from "vue";
import "echarts";
import API from "@/api";
import {
  analyseRankUsingGet,
  analyseResultRankUsingGet,
} from "@/api/userAnswerController";
import message from "@arco-design/web-vue/es/message";

use([
  CanvasRenderer,
  BarChart,
  TitleComponent,
  TooltipComponent,
  LegendComponent,
]);
provide(THEME_KEY, "dark");

const appAnswerCountList = ref<API.AppAnalyseVO[]>([]);
const appAnswerResultCountList = ref<API.AppAnswerResultVO[]>([]);
const appRank = ref<number>(5);
const loadDataAppAnswerCount = async () => {
  const res = await analyseRankUsingGet({
    appRank: appRank.value,
  });
  if (res.data.code === 0) {
    appAnswerCountList.value = res.data.data as any;
  } else {
    message.error("获取应用排名数据失败");
  }
};
const loadDataAppAnswerResultCount = async (appId: string) => {
  if (!appId) {
    return;
  }
  const res = await analyseResultRankUsingGet({
    appId: appId as any,
    rank: appRank.value as any,
  });
  if (res.data.code === 0) {
    appAnswerResultCountList.value = res.data.data as any;
  } else {
    message.error("获取应用结果数据失败");
  }
};

const appAnswerCountoptions = computed(() => {
  return {
    xAxis: {
      type: "category",
      data: appAnswerCountList.value.map(
        (item) => `${item.appName} (${item.appId})`
      ),
      name: "应用名称",
    },
    yAxis: {
      type: "value",
    },
    series: [
      {
        data: appAnswerCountList.value.map((item) => item.appCallCount),
        type: "bar",
      },
    ],
  };
});

const appAnswerResultCountOptions = computed(() => {
  return {
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "shadow",
      },
    },
    legend: {
      data: ["Sales"],
    },
    series: [
      {
        name: "应用答案结果分布",
        type: "pie",
        radius: "50%",
        data: appAnswerResultCountList.value.map((item) => {
          return { value: item.appAnswerCallCount, name: item.resultName };
        }),
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: "rgba(0, 0, 0, 0.5)",
          },
        },
      },
    ],
  };
});
watchEffect(() => {
  loadDataAppAnswerCount();
  loadDataAppAnswerResultCount("");
});
</script>

<template>
  <div id="appStatisticPage">
    <h2>热门应用统计</h2>
    <v-chart :option="appAnswerCountoptions" style="height: 300px" />
    <h2>应用结果统计</h2>
    <div class="search-bar">
      <a-input-search
        :style="{ width: '320px' }"
        placeholder="输入 appId"
        button-text="搜索"
        size="large"
        search-button
        @search="(value) => loadDataAppAnswerResultCount(value)"
      />
    </div>
    <div style="margin-bottom: 16px" />
    <v-chart :option="appAnswerResultCountOptions" style="height: 300px" />
  </div>
</template>

<style scoped></style>
